<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品分类</title>

    <link rel="stylesheet" href="css/北大青鸟课程导航.css">

    <style>

      .classify{border:3px solid chocolate;
          width: 200px;
          height: auto;
          border-radius: 10px;

         }

       .classify ul  li{font-size: 12px;
           font-weight: bold;
           border-bottom: 1px dashed #cccccc}

        ul img{vertical-align: middle} /*  middle是垂直居中*/
        .classify{margin: 10px auto}



    </style>

</head>
<body>

<div class="classify">

    <ul>

        <li> <img src="img/icon_01.jpg" width="52" height="46">酒水，饮料</li>
        <li> <img src="img/icon_02.jpg" width="52" height="46">进口食品</li>
        <li> <img src="img/icon_03.jpg" width="52" height="46">休闲零食</li>
        <li> <img src="img/icon_04.jpg" width="52" height="46">地方特产</li>
        <li> <img src="img/icon_05.jpg" width="52" height="46">保健，冲调</li>
        <li> <img src="img/icon_06.jpg" width="52" height="46">粮油，生鲜</li>

    </ul>




</div>

</body>
</html>